<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="" style="position: relative">
      <text style="position: absolute; color: #ffffff; margin-left: 30rpx"
        >请验证原手机号</text
      >
      <view class="password_top">
        <view
          class="password"
          style="display: flex; justify-content: flex-start"
        >
          <text style="color: #1fe7e7">+86</text>
          <view
            style="
              width: 2rpx;
              background-color: #262934;
              height: 30rpx;
              margin: 0 20rpx;
            "
          ></view>
          <input
            type="text"
            placeholder="请输入手机号"
            v-model="oldaccount"
            disabled="false"
          />
        </view>
        <view
          style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
        ></view>
        <view
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view class="passwords" style="flex: 2">
            <input
              type="text"
              placeholder="输入图形验证码"
              v-model="graphical"
              style="font-size: 28rpx; flex: 2; margin-left: 30rpx"
              placeholder-style="font-size: 28rpx;"
            />
          </view>
          <image
            src="../../static/graphical.png"
            mode=""
            v-if="graphicalimg == ''"
            style="width: 220rpx; height: 80rpx; margin-right: 30rpx"
          ></image>
          <image
            :src="graphicalimg"
            mode=""
            style="width: 220rpx; height: 80rpx; margin-right: 30rpx"
            @click="graphicalcode"
            v-else
          ></image>
          <!-- <canvas style="width:220rpx;height:80rpx;" canvas-id="canvas" @click="updateImageCode"></canvas> -->
        </view>
        <view
          style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
        ></view>

        <view class="password" @click="statefocus">
          <input
            type="number"
            placeholder="请填写获取的验证码"
            v-model="oldcode"
            style="font-size: 28rpx; flex: 2"
            :focus="focusCode"
            placeholder-style="font-size: 28rpx;"
          />
          <!-- <u-verification-code :seconds="seconds"   ref="uCode" @change="oldcodeChange"></u-verification-code> -->
          <view style="display: flex; align-items: center">
            <view
              style="
                width: 2rpx;
                height: 30rpx;
                background-color: #262934;
                margin-right: 15rpx;
              "
            ></view>
            <text
              @click="getCode"
              style="color: #1fe7e7; font-size: 28rpx; white-space: normal"
              >{{ oldtips }}</text
            >
          </view>
        </view>
      </view>
    </view>

    <view class="" style="position: relative">
      <text style="position: absolute; color: #ffffff; margin-left: 30rpx"
        >请验证新手机号</text
      >
      <view class="password_top" style="margin-top: 100rpx">
        <view
          class="password"
          style="display: flex; justify-content: flex-start"
          @click="statefocus(1)"
        >
          <text style="color: #1fe7e7">+86</text>
          <view
            style="
              width: 2rpx;
              background-color: #262934;
              height: 30rpx;
              margin: 0 20rpx;
            "
          ></view>
          <input
            type="number"
            placeholder="请输入新手机号"
            v-model="account"
            style="font-size: 28rpx; flex: 2"
            :focus="focusState"
            @blur="losefocus"
            placeholder-style="font-size: 28rpx;"
            @input="graphicalcodeNew"
          />
        </view>
        <view
          style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
        ></view>
        <block>
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <view class="passwords" style="flex: 2">
              <input
                type="text"
                placeholder="输入图形验证码"
                v-model="graphicalnew"
                style="font-size: 28rpx; flex: 2; margin-left: 30rpx"
                placeholder-style="font-size: 28rpx;"
              />
            </view>
            <image
              src="../../static/graphical.png"
              mode=""
              v-if="graphicalimgnew == ''"
              style="width: 220rpx; height: 80rpx; margin-right: 30rpx"
            ></image>
            <image
              :src="graphicalimgnew"
              mode=""
              style="width: 220rpx; height: 80rpx; margin-right: 30rpx"
              @click="graphicalcodeNew"
              v-else
            ></image>
            <!-- <canvas style="width:220rpx;height:80rpx;" canvas-id="canvas" @click="updateImageCode"></canvas> -->
          </view>
        </block>
        <view
          style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
        ></view>
        <view class="password" @click="statefocus(2)">
          <!-- <input type="text" placeholder="请填写获取的验证码" v-model="code"  >
						<view style="width: 2rpx;background-color:#262934;height: 30rpx;margin-left: 150rpx;"></view>
					<view>
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-verification-code>
						<text @click="getCodeNew" style="margin-right: 0rpx;color: #F78623;" :style="timer?'margin-right: 20rpx;':''">{{tips}}</text>
					</view> -->
          <input
            type="number"
            placeholder="请填写获取的验证码"
            v-model="code"
            style="font-size: 28rpx; flex: 2"
            :focus="focusCode"
            @blur="loseCode"
            placeholder-style="font-size: 28rpx;"
          />
          <u-verification-code
            :seconds="seconds"
            ref="uCode"
            @change="codeChange"
          ></u-verification-code>
          <view style="display: flex; align-items: center">
            <view
              style="
                width: 2rpx;
                height: 30rpx;
                background-color: #262934;
                margin-right: 15rpx;
              "
            ></view>
            <text
              @click="getCodeNew"
              style="color: #1fe7e7; font-size: 28rpx; white-space: normal"
              >{{ tips }}</text
            >
          </view>
        </view>
      </view>
    </view>

    <view class="button" @click="$u.debounce(Submit, 1000, true)"> 确定 </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      oldaccount: "",
      oldcode: "",
      account: "",
      code: "",
      tips: "",
      // refCode: null,
      seconds: 60,
      timer: false,
      parameter: {},
      focusCode: false,
      focusState: false,
      oldtips: "获取验证码",
      oldseconds: 60,
      oldstate: false,
      graphical: "",
      graphicalimg: "",
      graphicalnew: "",
      graphicalimgnew: "",
    };
  },
  onLoad() {
    let phone = uni.getStorageSync("userInfo");
    this.oldaccount = phone.account;
    this.graphicalcode();
    // console.log(option)
    // this.parameter = option
  },
  methods: {
    async graphicalcode() {
      if (!/^1[3456789]\d{9}$/.test(this.oldaccount)) {
        return;
      }
      let res = await api.graphicalcode({
        query: {
          key: this.oldaccount,
        },
        method: "get",
      });
      this.graphicalimg = res.data;
      console.log(res);
    },
    async graphicalcodeNew() {
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        return;
      }
      let res = await api.graphicalcode({
        query: {
          key: this.account,
        },
        method: "get",
      });
      this.graphicalimgnew = res.data;
    },
    losefocus() {
      this.focusState = false;
    },
    loseCode() {
      this.focusCode = false;
    },
    statefocus(state) {
      // if(state==1){
      // 	this.focusState = !this.focusState
      // }else{
      // 	this.focusCode = true
      // }
    },
    codeChange(text) {
      this.tips = text;
    },
    oldcodeChange() {
      this.oldtips = text;
    },
    async getCode() {
      if (!this.oldstate) {
        if (this.oldaccount == "") {
          this.$refs.uToast.show({
            title: "请填写手机号",
          });
          return;
        }
        if (this.graphical == "") {
          this.$refs.uToast.show({
            title: "请填写图形验证码",
          });
          return;
        }
        let res = await api.sendCodeSms({
          query: {
            account: this.oldaccount,
            type: 3,
            img_code: this.graphical,
          },
          method: "post",
        });
        if (res.code == 0) {
          this.$refs.uToast.show({
            title: res.msg,
            type: "success",
          });
        } else {
          this.graphicalcode();
          this.$refs.uToast.show({
            title: res.msg,
            type: "error",
          });
          return;
        }
        this.oldstate = true;
        this.oldtips = 60;
        var oldtimer = setInterval(() => {
          this.oldtips--;
          // this.oldseconds--
          if (this.oldtips == 0) {
            clearInterval(oldtimer);
            this.oldtips = "重新获取";
            this.oldstate = false;
          }
        }, 1000);
        // this.timer =true
      } else {
        this.$refs.uToast.show({
          title: "已发送短信",
          // 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
          // type: 'success',
          // 如果不需要图标，请设置为false
          // icon: false
        });
      }
    },
    async getCodeNew() {
      if (!this.timer) {
        if (this.account == "") {
          this.$refs.uToast.show({
            title: "请填写新手机号",
          });
          return;
        }
        if (this.graphicalnew == "") {
          this.$refs.uToast.show({
            title: "请填写图形验证码",
          });
          return;
        }
        let res = await api.sendCodeSms({
          query: {
            account: this.account,
            type: 3,
            img_code: this.graphicalnew,
          },
          method: "post",
        });
        if (res.code == 0) {
          this.$refs.uToast.show({
            title: res.msg,
            type: "success",
          });
        } else {
          this.graphicalcodeNew();
          this.$refs.uToast.show({
            title: res.msg,
            type: "error",
          });
          return;
        }
        this.timer = true;
        this.tips = this.seconds;
        var time = setInterval(() => {
          this.tips--;
          if (this.tips <= 0) {
            clearInterval(time);
            this.tips = "重新获取";
            this.timer = false;
          }
        }, 1000);
      } else {
        this.$refs.uToast.show({
          title: "已发送短信",
          // 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
          // type: 'success',
          // 如果不需要图标，请设置为false
          // icon: false
        });
      }
    },
    async Submit() {
      if (this.oldcode == "") {
        this.$refs.uToast.show({
          title: "请填写旧手机验证码",
        });
        return;
      }
      if (this.account == "") {
        this.$refs.uToast.show({
          title: "请填写新手机号",
        });
        return;
      }
      if (this.code == "") {
        this.$refs.uToast.show({
          title: "请填写新手机号验证码",
        });
        return;
      }
      let res = await api.changePhone({
        query: {
          old_phone: this.oldaccount,
          old_code: this.oldcode,
          new_phone: this.account,
          new_code: this.code,
        },
        method: "post",
      });
      if (res.code == 0) {
        let resa = await api.info({});
        uni.setStorageSync("userInfo", resa.data);
        this.$refs.uToast.show({
          title: "修改成功",
          type: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 2,
            success: function () {
              undefined;
              let page = getCurrentPages().pop(); //跳转页面成功之后
              if (!page) return;
              page.onLoad(); //如果页面存在，则重新刷新页面
            },
          });
        }, 500);
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
      // uni.navigateTo({
      // 	url:'../real_name/real_name'
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.password_top {
  border: 2rpx solid #262934;
  // margin: 0 30rpx;
  background-color: $bg-color3;
  // border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.password {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 20rpx 30rpx;
  min-height: 50rpx;
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.button {
  position: relative;
  top: 100rpx;
  margin: 30rpx;
  height: 90rpx;
  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
.passwords {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  min-height: 50rpx;
}
</style>
